<script>
import dayjs from "dayjs";
import Navbar from "../../components/navbar.vue";
export default {
  name: "my",
  components: {Navbar},
  data() {
    return {
      show1: false,
      show2: false,
      show3: false,
      meetingType: '',
      projectType: [
          // 1房地产，2商业项目，3大型工业聚集区,4大型乡村经营性公共服务设施
        {
          id: '',
          name: '全部类型'
        },
        {
          id: 1,
          name: '规划设计方案'
        },
        {
          id: 2,
          name: '可行性研究报告'
        },
        {
          id: 3,
          name: '初步设计'
        },
        {
          id: 4,
          name: '工程变更'
        },
        {
          id: 5,
          name: '环境影响报告'
        },
        {
          id: 6,
          name: '其它会议'
        }
      ],
      projectStatus: '',
      projectStatusList: [
        { id: '', name: '全部状态',color: '' },
        { id: '0', name: '未审核', color: '#999' },
        { id: '1', name: '评审会议申请中', color: '#02BF1C' },
        { id: '2', name: '已通过', color: '#02BF1C' },
        { id: '3', name: '未通过', color: '#F00000' },
        { id: '4', name: '评审会议组织中' , color: '#02BF1C'},
        { id: '5', name: '会中评审', color: '#02BF1C' },
        { id: '6', name: '已入库', color: '#02BF1C' },
        { id: '7', name: '开始会议', color: '#02BF1C' },
        { id: '8', name: '正在开会中', color: '#02BF1C' },
        { id: '9', name: '会议取消', color: '#F00000' },
        { id: '10', name: '会议结束' , color: '#02BF1C'},
        { id: '11', name: '模拟排座', color: '#02BF1C' }
      ],
      // 默认七天前
      startDate: dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
      endDate: dayjs().format('YYYY-MM-DD'),
      condition: {
        key1: '规划设计方案',
        key2: '全部状态',
        key3: '2023-09-01~2023-09-07'
      },
      keyword: '',
      list: [
        {
          title: '项目名称1',
          status: 'success'
        },
        {
          title: '项目名称2',
          status: 'error'
        }
      ]
    };
  },
  computed: {
    size() {
      return this.$store.getters.getSize
    },
    meetingTypeText() {
      return this.projectType.find(item => item.id === this.meetingType).name
    },
    projectStatusText() {
      return this.projectStatusList.find(item => item.id === this.projectStatus).name
    },
    dateText() {
      return this.startDate + '~' + this.endDate
    }
  },
  onShow() {
    this.getData()
  },
  methods: {
    getData() {
      uni.showLoading({
        title: '加载中'
      })
      this.$api.getProjectList({
        meetingType: this.meetingType,
        status: this.projectStatus,
        start: this.startDate,
        end: this.endDate,
        projectName: this.keyword
      }).then(res => {
        this.list = res.records.map(item => {
          return {
            ...item,
            statusText: this.projectStatusList.find(el => el.id == item.status).name,
            statusColor: this.projectStatusList.find(el => el.id == item.status).color,
            meetingTypeText: this.projectType.find(el => el.id == item.meetingType).name
          }
        })
      }).finally(() => {
        uni.hideLoading()
      })
    },
    confirmMeet(item) {
      this.meetingType = item.id
      this.show1 = false
      this.getData()
    },
    confirmStatus(item) {
      this.projectStatus = item.id
      this.show2 = false
      this.getData()
    },
    confirmDate(date) {
      this.startDate = date.startDate
      this.endDate = date.endDate
      this.getData()
    }
  }
}
</script>

<template>
  <div :class="['home-container',size]">
    <Navbar title="项目中心">
    </Navbar>
    <div style="height: 5rpx;background-color: transparent"></div>
    <div class="home-search">
      <div class="search-item font-14" @click="show1 = true">
        <span class="text u-line-1">{{ meetingTypeText }}</span>
        <u-icon size="16" color="#3D3D3D" name="arrow-down-fill"></u-icon>
      </div>
      <div class="search-item font-14 line" @click="show2 = true">
        <span class="text u-line-1">{{ projectStatusText }}</span>
        <u-icon size="16" color="#3D3D3D" name="arrow-down-fill"></u-icon>
      </div>
      <div class="search-item font-14" @click="show3 = true">
        <span class="text u-line-1">{{ dateText }}</span>
        <u-icon size="16" color="#3D3D3D" name="arrow-down-fill"></u-icon>
      </div>
    </div>
    <div style="height: 5rpx;background-color: transparent"></div>
    <div class="home-input">
      <u-search @search="getData" @custom="getData" bg-color="#EBECEE" shape="square" placeholder="项目名称" clearabled show-action v-model="keyword"></u-search>
    </div>
    <div class="home-content">
      <div class="home-item" v-for="item in list">
        <div class="home-item-header">
          <span class="font-16">{{ item.projectName}}</span>
          <span :class="['font-16']" :style="{ color: item.statusColor}">{{ item.statusText}}</span>
        </div>
        <div class="home-item-cell font-14">
          项目类型：{{item.meetingTypeText}}
        </div>
        <div class="home-item-cell font-14">
          组织单位：{{item.departName}}
        </div>
        <div class="home-item-cell font-14">
          评审申请时间：{{ item.createTime }}
        </div>
      </div>
    </div>

    <u-popup v-model="show1" mode="bottom" border-radius="14">
      <div class="c-popup">
        <div class="c-popup-title">
          <div class="c-popup-title-icon" @click="show1 = false">
            <u-icon name="close" size="32"></u-icon>
          </div>
          <span class="font-18">筛选</span>
        </div>
        <div class="c-popup-body">
          <u-row gutter="16" style="width: 100%">
            <u-col span="6" v-for="item in projectType" @click="confirmMeet(item)">
              <div :class="['select-item font-16', item.id === meetingType ? 'active' : '']">
                {{ item.name }}
              </div>
            </u-col>
          </u-row>
        </div>
      </div>
    </u-popup>
    <u-popup v-model="show2" mode="bottom" border-radius="14">
      <div class="c-popup">
        <div class="c-popup-title">
          <div class="c-popup-title-icon" @click="show2 = false">
            <u-icon name="close" size="32"></u-icon>
          </div>
          <span class="font-18">筛选</span>
        </div>
        <div class="c-popup-body">
          <u-row gutter="16" style="width: 100%">
            <u-col span="6" v-for="item in projectStatusList" @click="confirmStatus(item)">
              <div :class="['select-item font-16', item.id === projectStatus ? 'active' : '']">
                {{ item.name }}
              </div>
            </u-col>
          </u-row>
        </div>
      </div>
    </u-popup>
    <u-calendar v-model="show3" mode="range" @change="confirmDate"></u-calendar>
  </div>
</template>

<style lang="scss">
.c-popup {
  .c-popup-title {
    height: 100rpx;
    border-bottom: 1px solid #EDEDED;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .c-popup-title-icon {
    position: absolute;
    left: 32rpx;
    top: 50%;
    transform: translateY(-50%);
  }
  .c-popup-body {
    padding: 32rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .select-item {
      margin-top: 16rpx;
      width: 100%;
      height: 70rpx;
      line-height: 64rpx;
      text-align: center;
      color: #262626;
      border: 1px solid #E4E4E4;
      border-radius: 22rpx;
      &.active {
        background-color: #0089FF;
        color: #ffffff;
      }
    }
  }
}
.home-container {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .home-input {
    background-color: #ffffff;
    width: 100%;
    padding: 16rpx 32rpx;
  }
  .home-search {
    background-color: #ffffff;
    padding: 32rpx 0;
    margin: 10rpx 0;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: auto;
    .search-item {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      position: relative;
      justify-content: center;
      padding: 0 16rpx;
      .text {
        margin-right: 10rpx;
      }
    }
    .line {
      &::before {
        content: '';
        width: 1px;
        height: 30rpx;
        background-color: #E5E5E5;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
      &::after {
        content: '';
        width: 1px;
        height: 30rpx;
        background-color: #E5E5E5;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  .home-content {
    flex-grow: 1;
    overflow: auto;
    padding: 0 32rpx 32rpx 32rpx;
    .home-item {
      margin-top: 32rpx;
      width: 100%;
      padding: 32rpx;
      background-color: #ffffff;
      .home-item-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 9rpx;
        .status-error {
          color: #F00000;
        }
        .status-success {
          color: #02BF1C;
        }
      }
      .home-item-cell {
        display: flex;
        align-items: center;
        color: #999999;
        margin-top: 26rpx;
      }
    }
  }
}
</style>